<template>
  <div class="home-content">
    <div class="home-title" v-show="showTitle">
      <p>附近店铺</p>
      <span>更多></span>
    </div>
    <div class="container">
      <div
        class="home-item"
        v-for="(item, index) in shopData"
        :key="index"
        @click="goShop(item.id)"
      >
        <img
          :src="'https://elm.cangdu.org/img/' + item.image_path"
          alt=""
          class="food-img"
        />
        <div class="home-item-box">
          <div>
            <div class="food-name"><span>品牌</span>{{ item.name }}</div>
            <div class="sub-title">
              <p>
                月销<span>{{ item.recent_order_num }}</span>
              </p>
              <p>
                评分<span>{{ item.rating }}</span>
              </p>
              <p>距离{{ item.distance }}</p>
            </div>
            <p class="shop-name">
              {{ item.address }}
            </p>
          </div>
          <div class="home-item-bottom">
            <!-- <p>￥<span class="price">99</span></p>
            <div class="buy">来一份</div> -->
            <p style="color: #999; font-size: 0.32rem; margin: 0">
              <span style="color: #50b8fd; font-size: 0.32rem"
                >{{ item.piecewise_agent_fee.tips }}
              </span>
            </p>
            <div>
              <p
                style="
                  margin: 0;
                  font-size: 0.32rem;
                  text-align: right;
                  color: #50b8fd;
                "
              >
                {{ item.order_lead_time }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    shopData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    goShop(id) {
      this.$router.push("/shop/" + id);
    },
  },
};
</script>

<style lang="scss" scoped>
.home-content {
  width: 100%;
  background-color: #fff;
  border-radius: 0.266667rem 0.266667rem 0 0;
  .home-title {
    width: 100%;
    height: 1.2rem;
    box-sizing: border-box;
    padding-left: 0.6rem;
    padding-right: 0.32rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      font-size: 0.453333rem;
      color: #333;
      font-weight: bold;
    }
    span {
      color: #999;
      font-size: 0.373333rem;
    }
  }
  .container {
    padding: 0 0.533333rem;
    width: 100%;
    box-sizing: border-box;
    .home-item {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      height: 3.466667rem;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;
      margin-top: 0.373333rem;
      .food-img {
        width: 2.666667rem;
        height: 2.666667rem;
      }
      .home-item-box {
        flex: 1;
        margin-left: 0.213333rem;
        height: 2.666667rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .food-name {
          font-size: 0.426667rem;
          color: #333;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          span {
            font-size: 0.32rem;
            display: inline-block;
            padding: 0.066667rem;
            background-color: #ffd930;
            margin-right: 0.066667rem;
          }
        }
        .sub-title {
          display: flex;
          margin-top: 0.133333rem;
          p {
            font-size: 0.32rem;
            color: #999;
            margin-right: 0.32rem;
            span {
              color: #f94e4e;
            }
          }
        }
        .shop-name {
          margin-top: 0.133333rem;
          font-size: 0.32rem;
          color: #999;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .home-item-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.2rem;
          p {
            color: #f94e4e;
            font-size: 0.373333rem;
            margin-top: 0.266667rem;
            span {
              font-size: 0.48rem;
              font-weight: bold;
            }
          }
          .buy {
            width: 1.866667rem;
            height: 0.8rem;
            line-height: 0.8rem;
            text-align: center;
            box-sizing: border-box;
            border: 1px solid #5e98fb;
            color: #5e98fb;
            font-size: 0.373333rem;
          }
        }
      }
    }
  }
}
</style>